<template>
  <div class="smart">
    <div class="smart-tool">
      <div class="smart-tool__select">
        <div class="select-label dtc">
          （可快速填写以下变量内容，证明中会替换成真实信息！）
        </div>
      </div>
      <div class="smart-tool__btn">
        <a-space>
          <a-button
            v-for="(item, index) in labelList"
            :key="index"
            @click="inputLabel(item)"
            >#{{ item.name }}#</a-button
          >
        </a-space>
      </div>
    </div>
    <RichTextNew v-model:content="result" ref="richText"></RichTextNew>
  </div>
</template>

<script lang="ts" setup>
import RichTextNew from '@/components/RichTextNew/index.vue';

const props = withDefaults(
  defineProps<{
    content?: string;
    disabled?: boolean;
  }>(),
  {}
);
const emit = defineEmits(['update:content']);
const TYPE = {
  EMPLOYEE: 1,
  CONTRACT: 2
};
const labelList = ref<any>([
  { name: '姓名' },
  { name: '组织' },
  { name: '电话号码' },
  { name: '身份证' },
  { name: '邮箱' },
  { name: '岗位' },
  { name: '性别' }
]);
const options = ref([
  {
    code: 'EMPLOYEE',
    name: '人员'
  },
  {
    code: 'CONTRACT',
    name: '合同'
  }
]);
const smartLabelType = ref('EMPLOYEE');
const record = ref('');
const departMentList = ref([
  {
    id: 1,
    name: 'a部门'
  },
  {
    id: 2,
    name: 'b部门'
  }
]);

const result = computed({
  get: () => {
    return props.content;
  },
  set: (val) => {
    emit('update:content', val);
  }
});
const richText = ref();
const inputLabel = (item: any) => {
  const tag = `&nbsp;<span style="text-decoration: underline; color: #3598db; font-size: 12pt;">#${item.name}#</span>&nbsp;`;
  nextTick(() => {
    richText.value.insertContent(tag);
  });
};
const initSmartType = (val?: any) => {
  console.log(val);
  record.value = val;
  getLable();
};
const getLable = () => {
  // labelList.value = [{ name: '姓名' }, { name: '年龄' }];
};

initSmartType();
</script>

<style lang="less" scoped>
.smart {
  padding-left: 2px;

  &-tool {
    margin-bottom: 10px;

    &__select {
      margin-bottom: 5px;

      .select {
        &-label {
          margin-right: 5px;
        }

        &-main {
          width: 130px;
        }
      }
    }
  }
}
</style>
